<template>
  <svg v-if="name" :style="{ width: newSize, height: newSize }" class="svg-icon-wrapper">
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  type Props = {
    /** icon 的前缀 */
    prefix?: string;
    /** icon 名称 */
    name?: keyof BaseSvgIconPath;
    /** icon 的颜色 */
    color?: string;
    /** icon 的尺寸 */
    size?: number | string;
  };

  defineOptions({
    name: 'base-svg-icon',
  });

  const props = withDefaults(defineProps<Props>(), {
    prefix: '#icon-',
    size: '1em',
    color: 'currentColor',
    name: undefined,
  });

  const newSize = computed(() => (!isNaN(Number(props.size)) ? `${props.size}px` : props.size));
</script>

<style>
  .svg-icon-wrapper {
    display: inline-block;
  }
</style>
